<script setup>
import { ref } from 'vue'
import { onLoad, onPageScroll } from '@dcloudio/uni-app'
import NavBar from '@/components/NavBar.vue'
import { getNoticeList } from '@/api/index'

onLoad(() => {
  onSearch()
})

// 滚动距离，用于导航栏背景色渐变
const scrollTop = ref(0)
onPageScroll((event) => {
  scrollTop.value = event.scrollTop
})

// 通知公告列表
const noticeList = ref([])
async function onSearch() {
  const { result } = await getNoticeList()
  noticeList.value = [...result, ...noticeList.value]
}

function goNoticeDetail(id) {
  uni.navigateTo({ url: `/pages/index/view/notice-detail?id=${id}` })
}
</script>

<template>
  <view class="container pb-safe min-h-safe">
    <NavBar title="通知公告" title-color="#fff" change-title-color :scroll-top="scrollTop" />
    <main class="px-1.5 pt-1.5">
      <view class="flex flex-col">
        <view
          v-for="item in noticeList"
          :key="item.id"
          class="px-1.5 py-6 mb-1.5 bg-white rounded shadow flex flex-col"
          @click="goNoticeDetail(item.id)"
        >
          <p class="mb-3.5 text-30 font-semibold">
            {{ item.title }}
          </p>
          <p class="mb-1 text-28 truncate">
            {{ item.remark }}
          </p>
          <p class="text-25 text-right">
            {{ item.createTime.split(' ')[0] }}
          </p>
        </view>
      </view>
      <view class="pt-4.5 text-22 text-[#ccc] text-center">
        没有更多了
      </view>
    </main>
  </view>
</template>

<style scoped>
.container {
  background-image: linear-gradient(to bottom, #fba414 10%, white 40%);
}
</style>
